/*
 * @Author: wangtao
 * @Date: 2021-01-14 15:14:08
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-01-28 19:03:12
 * @Description: file content
 */

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Modal,
  Text,
  TouchableOpacity,
  PixelRatio,
  TextInput,
  Image,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import {
  mainBgColorLightGray,
  mainBgColorWhite,
  fontColorDeepRed,
  fontColorBlack,
  fontColorLightGray,
  fontColorCoffee,
  screenWidth,
  px2dp,
  screenHeight,
  splitLineColorLightGray,
  fontColorSecDeepGray,
  mainBgColorBlack,
} from '../../../../../common/styles';
import { Button, msg, DashLine } from '../../../../../common';
import { iconAdd, iconDelete, iconReduce } from '../../../../../image';

const { Submit } = Button;

export default class SourceAddressItem extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {}

  componentWillUnmount() {}

  render() {
    const {
      type,
      sort,
      address,
      addressList,
      addAddress,
      choosePutTime,
      onChangeContactModal,
    } = this.props;
    return (
      <View style={styles.addressWrap}>
        <View style={styles.addressLeft}>
          <LinearGradient
            colors={
              type === 1 ? ['#7EE35E', '#2CBD26'] : ['#F48F25', '#EB2F2F']
            }
            style={[styles.addressMark]}
            start={{ x: 0, y: 0 }}
            end={{ x: 0, y: 1 }}
          >
            <Text style={{ color: mainBgColorWhite }}>
              {this.renderLabel(type)}
            </Text>
          </LinearGradient>
        </View>

        <View style={styles.addressCenter}>
          <TouchableOpacity
            onPress={() => {
              msg.emit('router: goToNext', {
                routeName: 'ReleaseSourceSelectAddress',
                type,
                sort,
              });
            }}
            activeOpacity={0.8}
          >
            <Text numberOfLines={1} style={address.province ? [styles.addressTextSelect] : [styles.addressText]}>
              {address.province
                ? `${address.province}${address.city}${address.district}${address.addressDetails}`
                : this.renderAddressPlaceholder(type)}
            </Text>
            <DashLine styleItem={{}} />
          </TouchableOpacity>
          {type === 1 && (
            <TouchableOpacity
              onPress={() => {
                choosePutTime({ type, sort });
              }}
              activeOpacity={0.8}
            >
              <Text
                numberOfLines={1}
                style={address.loadingStartTime ? [styles.addressTextSelect, { fontSize: px2dp(28) }] : [styles.addressText, { fontSize: px2dp(28) }]}
              >
                {address.loadingStartTime
                  ? `${address.loadingStartTime} - ${address.loadingEndTime}`
                  : '必填，请输入装货时间'}
              </Text>
              <DashLine styleItem={{}} />
            </TouchableOpacity>
          )}
          <TouchableOpacity
            onPress={() => {
              onChangeContactModal({ type, sort });
            }}
            activeOpacity={0.8}
          >
            <Text
              numberOfLines={1}
              style={address.linkMan ? [styles.addressTextSelect, { fontSize: px2dp(28) }] : [styles.addressText, { fontSize: px2dp(28) }]}
            >
              {address.linkMan || address.linkMobile
                ? ` ${address.linkMan}  ${address.linkMobile}`
                : '选填，联系人及联系方式'}
            </Text>
          </TouchableOpacity>
        </View>

        {/* 右边的加减号 */}
        {this.renderIcon()}
      </View>
    );
  }

  renderLabel = (type) => {
    switch (type) {
    case 1:
      return '装';
    case 2:
      return '卸';
    default:
      return '-';
    }
  };

  renderAddressPlaceholder = (type) => {
    switch (type) {
    case 1:
      return '必填，请输入装货地';
    case 2:
      return '必填，请输入卸货地';
    default:
      return '-';
    }
  };

  renderIcon = () => {
    const {
      type,
      sort,
      addressList,
      addAddress,
      deleteAddress,
      addressListMaxNum,
    } = this.props;
    // 如果现在的地址列表长度小于最大限制
    if (addressList.length < addressListMaxNum) {
      if (sort === 0) {
        return (
          <TouchableOpacity
            style={styles.addressRight}
            activeOpacity={0.8}
            onPress={() => {
              addAddress({ type });
            }}
          >
            <Image
              style={[styles.dotImg]}
              resizeMode='contain'
              source={iconAdd}
            />
          </TouchableOpacity>
        );
      }
      return (
        <TouchableOpacity
          style={styles.addressRight}
          activeOpacity={0.8}
          onPress={() => {
            deleteAddress({ type, sort });
          }}
        >
          <Image
            style={[styles.dotImg]}
            resizeMode='contain'
            source={iconReduce}
          />
        </TouchableOpacity>
      );
    } if (addressList.length >= addressListMaxNum && sort !== 0) {
      // 如果现在的地址列表长度大于最大限制,则第一个隐藏添加按钮，其他的是减
      return (
        <TouchableOpacity
          style={styles.addressRight}
          activeOpacity={0.8}
          onPress={() => {
            deleteAddress({ type, sort });
          }}
        >
          <Image
            style={[styles.dotImg]}
            resizeMode='contain'
            source={iconReduce}
          />
        </TouchableOpacity>
      );
    }
  };
}
const styles = StyleSheet.create({
  addressWrap: {
    borderBottomWidth: 1 / PixelRatio.get(),
    borderColor: splitLineColorLightGray,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: px2dp(20),
  },
  addressMark: {
    width: px2dp(40),
    height: px2dp(40),
    backgroundColor: 'green',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: px2dp(6),
  },
  addressLeft: {
    width: px2dp(104),
    height: px2dp(40),
    justifyContent: 'center',
    alignItems: 'center',
  },
  addressRight: {
    width: px2dp(104),
    height: px2dp(40),
    justifyContent: 'center',
    alignItems: 'center',
  },
  addressCenter: {
    flex: 1,
  },
  addressText: {
    fontSize: px2dp(32),
    color: fontColorLightGray,
    lineHeight: px2dp(74),
  },
  addressTextSelect: {
    fontSize: px2dp(32),
    color: fontColorLightGray,
    lineHeight: px2dp(74),
    color: fontColorBlack
  },
  dotImg: {
    width: px2dp(42),
    height: px2dp(42),
  },
});
